<template>
	<main-content>
		<view class="content-color">
			<view class="">
				<template v-for="(group,groupI) in viewConfig[formSource]" :key="groupI">
					<view>
						<view class="p-16">
							<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						{{groupArr[groupI]}}</group-title>
						</view>
						<view class="view-group">
							<view class="view-item p-x-16 p-y-12 flex flex-row justify-between items-center"
								style="border-bottom: 1rpx solid rgba(231, 230, 228, 1);"
								v-for='(item,i) in group.filter(e=>!e.hide)' :key="i">
								<view class="list-title">
									{{item.label}}
								</view>
								<view class="" v-if="item.dataIndex=='images'">
									<view class="" v-for="imgSrc in formData[item.dataIndex]" :key="imgSrc">
										<u-image :src="imgUrl[imgSrc]" width="50px" height="50px"></u-image>
									</view>
								</view>
								<view class="" v-else>
									{{
										item?.customRender ? item.customRender({formData,text:formData[item.dataIndex]}) : formData[item.dataIndex]
									}}
									<u-icon v-if="item.copy" name="copy-fill" custom-prefix="custom-icon"
										:color="maiColor" class="p-l-2" @tap.stop="copy(formData[item.dataIndex])" />
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="">
				<view class="p-16">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						交易信息</group-title>
				</view>
				<view class="">
					<orderList :rowData="propsData" />
				</view>
			</view>
			<view class="">
				<view class="p-16">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						协商历史</group-title>
				</view>
				<view class="" v-if="formSource == ali">
					<u-button type="primary"
						href="https://b.alipay.com/page/merchant-openplatform/securityCenter">链接</u-button>
				</view>
				<view class="" v-else>
					<aliHistory :row-data="historyData" />
				</view>
			</view>
		</view>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		computed,
		nextTick,
		h
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		ISENABLED,
		COMPLAINT_STATUS, //投诉状态
		COMPLAINT_SOURCE, //投诉来源
		COMPLAINT_PROBLEM_TYPE, //问题类型
		ZZB_CHANNEL_TYPE
	} from '@/common/dict.js'
	import {
		selectDictLabel,
		parseTime,
		copy,
		formatToMoney,
		strToArr,
		parseQueryParams
	} from '@/common/common.js'
	import {
		complaintApi
	} from '@/pages-menus/common/api/complaint/index.js'

	import orderList from './components/order-list.vue'
	import aliHistory from './components/ali-history.vue'

	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const apiSource = {
		alimini: (data) => {
			return complaintApi.aliMiniHistory(data)
		},
		ali: (data) => {
			return complaintApi.aliDetail(data)
		},
	}

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})
	const initForm = {
		area: undefined, //城市，所属区/县
		no: undefined, //门店账号
		logoImgUrl: undefined, //门店Logo地址
		agentId: undefined, //所属代理商编号
		agentInfo: undefined, //代理商出参
		exhibitionId: undefined, //所属展业人员编号
		remark: undefined, //备注
		cTime: undefined, //创建时间/入网时间
		type: undefined, //门店类型(0:直营;1:加盟)
		storeAbbrName: undefined, //门店简称
		cUserId: undefined, //创建用户编号
		areaCode: undefined, //城市，所属区/县CODE
		uUserId: undefined, //更新用户编号
		areaName: undefined, //城市，所属区/县CODE
		merchantId: undefined, //所属商户编号
		phone: undefined, //电话
		cUserName: undefined, //创建人
		uUserName: undefined, //更新人
		name: undefined, //名字
		storeName: undefined, //门店名称
		uTime: undefined, //更新时间
		id: undefined, //门店编号
		addr: undefined, //地址
		status: undefined, //门店状态(0:禁用;1:启用)
	}
	const formData = ref({
		...initForm
	})

	const groupArr = ['基本信息', '投诉内容']

	const viewConfig = ref({
		'alimini': [
			[{
					label: '投诉订单号',
					dataIndex: 'complainId',
				},
				{
					label: '商户名称',
					dataIndex: 'merchantName',
				},
				{
					label: '交易金额',
					dataIndex: 'tradeAmount',
					// customRender: (data) => formatToMoney(data.amount / 100),
				},
				{
					label: '退款金额',
					dataIndex: 'refundAmount',
					// customRender: (data) => formatToMoney(data.refundAmount / 100),
				},
				{
					label: '投诉时间',
					dataIndex: 'gmtCreate',
					customRender: (data) => parseTime(data.text),
				},
				{
					label: '投诉完结时间',
					dataIndex: 'gmtFinished',
					customRender: (data) => parseTime(data.text),
				},
				{
					label: '过期时间',
					dataIndex: 'overdueTime',
					customRender: (data) => parseTime(data.text),
				},
				{
					label: '通道类型',
					dataIndex: 'channelTypes',
					customRender: () => {
						return selectDictLabel(ZZB_CHANNEL_TYPE, propsData.value
							?.channelTypes)
					},
				},
				{
					label: '投诉来源',
					dataIndex: 'source',
					customRender: (data) => selectDictLabel(COMPLAINT_SOURCE, propsData.value?.source),
				},
				{
					label: '投诉状态',
					dataIndex: 'status',
					customRender: (data) => selectDictLabel(COMPLAINT_STATUS, data.text),
				},
			],
			[{
					label: '用户联系方式',
					dataIndex: 'phoneNo',
				},
				{
					label: '投诉原因',
					dataIndex: 'complainReason',
				},
				{
					label: '投诉诉求',
					dataIndex: 'leafCategoryName',
				},
				{
					label: '投诉内容',
					dataIndex: 'content',
				},
				{
					label: '投诉图片',
					dataIndex: 'images',
				},
			]
		],
		'ali': [
			[{
					label: '投诉订单号',
					dataIndex: 'taskId',
				},
				{
					label: '商户名称',
					dataIndex: 'merchantName',
				},
				{
					label: '投诉金额',
					dataIndex: 'complainAmount',
				},
				{
					label: '退款金额',
					dataIndex: 'refundAmount',
				},
				{
					label: '投诉时间',
					dataIndex: 'gmtComplain',
					customRender: (data) => parseTime(data.gmtComplain),
				},
				{
					label: '处理时间',
					dataIndex: 'gmtProcess',
					customRender: (data) => parseTime(data.gmtProcess),
				},
				{
					label: '过期时间',
					dataIndex: 'gmtOverdue',
					customRender: (data) => parseTime(data.gmtOverdue),
				},
				{
					label: '投诉网址',
					dataIndex: 'complainUrl',
				},
				{
					label: '通道类型',
					dataIndex: 'channelTypes',
					customRender: () => {
						return selectDictLabel(ZZB_CHANNEL_TYPE, propsData.value
							?.channelTypes)
					},
				},
				{
					label: '投诉来源',
					dataIndex: 'source',
					customRender: (data) => selectDictLabel(COMPLAINT_SOURCE, propsData.value?.source),
				},
				{
					label: '投诉状态',
					dataIndex: 'status',
					customRender: (data) => selectDictLabel(COMPLAINT_STATUS, data.status),
				},
			],
			[{
					label: '用户联系方式',
					dataIndex: 'contact',
				},
				{
					label: '投诉内容',
					dataIndex: 'complainContent',
				},
			]
		]
	})

	const queryData = ref({})
	const historyData = ref([])
	const getForm = () => {
		apiSource[formSource.value](queryData.value).then((res) => {
			if (res.code != 200) return
			formData.value = res.data
			historyData.value = res.data?.replyDetailInfos
		})
	}

	const initFormView = () => {
		getForm()
	}

	const propsData = ref({})
	const formSource = ref("alimini")
	onLoad(async (options) => {
		let opt = parseQueryParams(options)
		if (opt.formSource) {
			formSource.value = opt.formSource
		}
		if (opt.rowData?.complaintNo) {
			propsData.value = {
				...opt.rowData
			}
			const {
				complaintNo,
				merchantId
			} = opt.rowData
			queryData.value.complaintId = complaintNo
			queryData.value.merchantId = merchantId
			initFormView()
		}
	})
	onReady(() => {})
</script>
<style lang='scss' scoped>
	.view-group {
		background-color: #fff;
	}

	.operate-box {
		position: fixed;
		z-index: 99;
		bottom: 50rpx;
	}

	.tar {
		:deep(.u-input) {
			text-align: right !important;
		}
	}
</style>